<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>617贪吃蛇</title>
		<style>
			*{               
				padding: 0;
			    margin: 0;
		     }
		     #map{
		     	width: 500px;
		     	height: 500px;
		     	background-color: pink;
		     	position: relative;
		     }
		     table{
		     	position: absolute;
		     	top:64px;
		     	left:0
		     }
		     td{
		     	width: 46px;
		     	height: 46px;
		     }
		</style>
		
	</head>
	<body>
		<h1 id="score">Score：0</h1>
		<button id="bt1">快</button>
		<button id="bt2">中</button>
		<button id="bt3">慢</button>
		<div id="map">
			
		</div>
		<script>
			//第一步：绘制地图 利用JS输出表格
			document.write("<table border='1' cellpadding='0'>")
			    for(var n=0;n<10;n++){
			    	document.write("<tr>")
			    	    for(var j=0;j<10;j++){
			    	    	document.write("<td></td>")
			    	    }
			    	document.write("</tr>")
			    }
			document.write("</table>")
			//第二步：产生蛇头和食物   蛇头：红色 食物蓝色
			function createDiv(color){
				//js动态产生元素
				var div=document.createElement("div")
			//设置headNode的style
			    div.style.width="50px"
			    div.style.height="50px"
			    div.style.backgroundColor=color
			//位置是随机产生的，因此添加绝对定位
			    div.style.position="absolute"
			//left和top是随机  50*0-9
			//Math.random（）产生0-1的随机数
			    div.style.left=parseInt(Math.random()*10)*50+"px"
			    div.style.top=parseInt(Math.random()*10)*50+"px"
			//找到当前的map 通过id找到对应元素
			    var map=document.getElementById("map")
			    map.appendChild(div)
			    return div
			}
			
			var headNode=createDiv("red")
			var foodNode=createDiv("blue")
			var bodyNodes=[]
			var number=10
			var score=0
			//点击按钮  让蛇头移动
			//规定蛇头移动方向
			//中
			headNode.dirtion="左"
			var bt1=document.getElementById("bt1")
			var bt2=document.getElementById("bt2") 
			var bt3=document.getElementById("bt3")//找到对应的按钮
			bt2.onclick=function(){
				//定时器 每间隔一段时间，自己走
				setInterval(function(){
					//身体移动
					if(bodyNodes.length>0){
						//后方身体先走
						for(var n=bodyNodes.length-1;n>=0;n--){
							//中速：0.5秒移动一次
				//点击中速时，让对应的蛇头 按照dirtion移动50px
				    switch(bodyNodes[n].dirtion) {
				    	case "左":
				    		var l = parseInt(bodyNodes[n].style.left)
				    		bodyNodes[n].style.left = l - 50 + "px"
				    	break
				    	case "右":
				    		var l = parseInt(bodyNodes[n].style.left)
				    		bodyNodes[n].style.left = l + 50 + "px"
				    	break
				    	case "上":
				    		var t = parseInt(bodyNodes[n].style.top)
				    		bodyNodes[n].style.top = t - 50 + "px"
				    	break
				    	case "下":
				    		var t = parseInt(bodyNodes[n].style.top)
				    		bodyNodes[n].style.top = t + 50 + "px"
				    	break
						}
				        //再次跟随上一块的移动方向bodeyNodes[n]
				        if(n==0){
				        	bodyNodes[n].dirtion=headNode.dirtion
				        }else{
				        	bodyNodes[n].dirtion=bodyNodes[n-1].dirtion
				        }
				        
					}
					
				}
					switch(headNode.dirtion){
					case "左":
						//原本left基础上，-50
						//100px 保留数值 
						//parseInt() 1.取整 2.数据类型的转化 保留字符串前面的数字 
						//Number()
						var l=parseInt(headNode.style.left)
						headNode.style.left=l-50+"px"
					break
					case "右":
						var l=parseInt(headNode.style.left)
						headNode.style.left=l+50+"px"
					break
					case "上":
						var t=parseInt(headNode.style.top)
						headNode.style.top=t-50+"px"
					break
					case "下":
						var t=parseInt(headNode.style.top)
						headNode.style.top=t+50+"px"
					break
				}
					//判断蛇头是否出界
					if(parseInt(headNode.style.top)<0||parseInt(headNode.style.top)>450||parseInt(headNode.style.left)<0||parseInt(headNode.style.left)>450){
						 clearInterval(window.t)
					    alert("撞到边界，死亡")
					}
					//当蛇头移动后，判断是否吃到自己的身体
					for(var n=0;n<bodyNodes.length;n++){
						if(bodyNodes[n].style.left==headNode.style.left&&bodyNodes[n].style.top==headNode.style.top){
							clearInterval(window.t)
							alert("咬住尾巴")
							return
						}
					}
					   
				    //进行碰撞检测，蛇头和食物 重合到一起，食物位置进行刷新
				    //重合到一切如何表示？都采用定位
				    if(headNode.style.left==foodNode.style.left&&headNode.style.top==foodNode.style.top){
				    	var newNode=createDiv("yellow")
				    	//新产生身体的位置
				    	//根据当前最后一块移动方向来决定：如果蛇头向上走，新产生的内容，在其下方
				    	//统计管理当前贪吃蛇，所产生的身体
				    	//在其下方：left相同top+50
				    	//bodyNodes数组 如果有内容的话。数组中最后一个值，就是最后一块
				    	//如果没有内容，蛇头就是最后一块
				    	var lastNode
				    	if(bodyNodes.length==0){
				    		lastNode=headNode
				    	}else{
				    		lastNode=bodyNodes[bodyNodes.length-1]
				    	}
				    	switch(lastNode.dirtion){
				    		case "上":
				    		newNode.style.left=lastNode.style.left
				    		var t=parseInt(lastNode.style.top)
				    		newNode.style.top=t+50+"px"
				    		break
				    		case "下":
				    		newNode.style.left=lastNode.style.left
				    		var t=parseInt(lastNode.style.top)
				    		newNode.style.top=t-50+"px"
				    		break
				    		case "左":
				    		newNode.style.top=lastNode.style.top
				    		var l=parseInt(lastNode.style.left)
				    		newNode.style.left=l+50+"px"
				    		break
				    		case "右":
				    		newNode.style.top=lastNode.style.top
				    		var l=parseInt(lastNode.style.left)
				    		newNode.style.left=l-50+"px"
				    		break
				    	}
				    	newNode.dirtion=lastNode.dirtion
				    	bodyNodes.push(newNode)
				    	
				    	var px=parseInt(Math.random()*10)*50+"px"
				    	var py=parseInt(Math.random()*10)*50+"px"
				    	while(true){
				    		for(var n=0;n<bodyNodes.length;n++){
				    			if(bodyNodes[n].style.left==px&&bodyNodes[n].style.top==py){
				    				px=parseInt(Math.random()*10)*50+"px"
				    				py=parseInt(Math.random()*10)*50+"px"
				    				break
				    			}
				    		}
				    			if(n==bodyNodes.length){
				    				break
				    			
				    		}
				    	}
				    	
				    	foodNode.style.left=px
				    	foodNode.style.top=py
				    	//加分
				    	var h1 = document.getElementsByTagName("h1")
				    	score+=10
                       h1[0].innerHTML = 'Score:' + score //分数
				    }
				}, 500)
 
			}
			
			//按下键盘上下左右时，让对应的蛇头，按照dirtion移动50px
			//event.keyCode键盘对应键值
			document.onkeydown=function(event){
				//根据按键。改变方向
				//键值判断
				console.log(event.keyCode)
				switch(event.keyCode){
					case 38:
					if(!(headNode.dirtion=="下"&&bodyNodes.length>0)){
						headNode.dirtion="上"
					}				    
					break
					case 40:
					if(!(headNode.dirtion=="上"&&bodyNodes.length>0)){
						headNode.dirtion="下"
					}
					break
					case 37:
					if(!(headNode.dirtion=="右"&&bodyNodes.length>0)){
						headNode.dirtion="左"
					}
					break
					case 39:
					if(!(headNode.dirtion=="左"&&bodyNodes.length>0)){
						headNode.dirtion="右"
					}
					break
				}
			}
			
 
			
		</script>
	</body>
</html>